<template>
  <div class="container">
    <view class="wrap">
      <view class="title textCenter">
        Hi，oakley
        <view>你已经是{{list[current].name}}状态啦～</view>
      </view>

      <view class="url">
        <uv-image :src="list[current].url" width="118px" height="118px"></uv-image>
      </view>

      <view class="content">
        <view class="name fz16 bold">我的交友状态:</view>
        <view class="box flex alignCenter" :class="{ active: current === index }" v-for="(item, index) in list" :key="index" @click="setStatus(index)">
          <uv-image :src="item.url" width="65px" height="65px"></uv-image>
          <text>{{item.name}}</text>
        </view>
      </view>
    </view>
  </div>
</template> 

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let current = ref(0);
let list = ref([
  {
    name: "社交多样化",
    url: "https://oss.seenlove.com/images/16cfa9d3975ced9a05034bc1ade4aed6.png",
    value: 1,
  },
  {
    name: "情侣档",
    url: "https://oss.seenlove.com/images/cd6d8baa74b281f4562d56b8a3f31c4d.png",
    value: 2,
  },
]);

onLoad((e) => {
  current.value = proxy.$utils.findIndexByField(
    list.value,
    "value",
    Number(e.status)
  );
});

async function setStatus(index) {
  current.value = index;
  await proxy.$apis.updateLoveStatus({ loveStatus: list.value[index].value });
  proxy.$utils.showToast("状态已更新");
}
</script>



<style lang="scss" scoped>
.container {
  .wrap {
    width: calc(100% - 40px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .url {
      width: 118px;
      margin: auto;
    }
    .content {
      .name {
        margin-bottom: 16px;
      }
      .active {
        border: 2px solid #9e06ff !important;
        color: #9e06ff !important;
      }
      .box {
        background-color: #f2f2f2;
        border: 2px solid #f2f2f2;
        border-radius: 8px;
        margin-bottom: 17px;
        color: #999999;
        text {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>





